<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>vue set </title></title>
        <script type="text/javascript" src="../js/vue.js"></script>
        
    </head>
    <body>
        <div id="root">
            {{school.name}} - {{school.address}}

            <h2>学生信息</h2>
            <button @click="updateStudent">添加性别</button>
            学生姓名: {{school.student.name}} 
            学生年龄: {{school.student.age}}
            <template v-if="school.student.gender">
                学生性别:{{school.student.gender}}
            </template>
            <h2>朋友信息</h2>
            <ul>
                <li v-for="f,idx in school.student.friends" :key="idx">
                    {{f.name}} - {{f.age}}
                </li>
        </div> 
    </body>
    <script>
        const vm = new Vue({
            el: "#root",
            data:{
                school:{
                    name:"hangzhou",
                    address:10,
                    student:{
                        name:"tom",
                        age:20,
                        hobby:[1,2,3],
                        friends:[
                            {name:"jerry", age:21},
                            {name:"jack", age:22},
                        ]
                    }
                }
            },
            methods: {
                updateStudent(){
                    // Vue.set(this.school.student,'gender','男')  // 动态添加属性
                    this.$set(this.school.student,'gender','男')  // 动态添加属性, 不可以直接给data对象添加属性.
                    // 数组通过下标修改: 
                    this.$set(this.school.student.hobby,0,4) // 修改数组中的某一项
                }
            },
        })
    </script>
</html> 